<template>
  <div class="tabBox">
    <el-tag
      v-for="tag in useTabStore().tabArray"
      :key="tag.title"
      closable
      :type="tag.type"
      @click="tabClick(tag)"
      @close="tabClose(tag)"
    >
      {{ tag.title }}
    </el-tag>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import { useTabStore } from "../store/modules/tabStore";
export default defineComponent({
  name: "Tab",
  setup() {
    const tabClick = (val: any) => useTabStore().tabClick(val);
    const tabClose = (val: any) => useTabStore().tabClose(val);
    return {
      tabClick,
      tabClose,
      useTabStore,
    };
  },
});
</script>

<style lang="less" scoped>
@import "../less/components/tab.less";
</style>
